<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="root"></div>

		<script src="../../lib/react.development.js"></script>
		<script src="../../lib/react-dom.development.js"></script>
		<script src="../../lib/babel.min.js"></script>

		<script type="text/babel">
			class App extends React.Component {
				constructor() {
					super()
					this.state = {
						isShow: true
					}
				}

				onChangeClick() {
					this.setState({
						isShow: !this.state.isShow
					})
				}

				render() {
					const { isShow } = this.state

					return (
						<div>
							<button onClick={() => this.onChangeClick() }>切换</button>
							<h2 style={{ display: isShow ? 'block' : 'none' }}>哈哈哈</h2>
						</div>
					)
				}
			}

			const root = ReactDOM.createRoot(document.querySelector('#root'))
			root.render(<App />)
		</script>
	</body>
</html>
